<template>
  <div>
    <div class="echar" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { useRecordStore } from '@/store/record'
const recordStore = useRecordStore()

const charts = ref(null)

onMounted(() => {
  const chartInstance = echarts.init(charts.value)
  chartInstance.setOption(option)
  try {
    chartInstance.setOption(option)
  } catch (error) {
    console.error('Error initializing chart:', error)
  }
})
const option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '支出',
      type: 'pie',
      radius: '50%',
      data: recordStore.outCome,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
</script>

<style scoped>
.echar {
  width: 100%;
  height: 400px;
}
</style>
